<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>宠物用品商城 - 管理员端</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        }
        
        body {
            background-color: #f5f5f5;
            color: #333;
            max-width: 480px;
            margin: 0 auto;
            height: 100vh;
            overflow-x: hidden;
            position: relative;
            padding-bottom: 60px;
        }
        
        .page {
            display: none;
            height: 100%;
            overflow-y: auto;
            background-color: white;
        }
        
        .page.active {
            display: block;
        }
        
        header {
            background-color: #f44336;
            color: white;
            padding: 16px;
            text-align: center;
            font-size: 18px;
            font-weight: bold;
            position: relative;
        }
        
        .header-actions {
            position: absolute;
            right: 16px;
            top: 50%;
            transform: translateY(-50%);
        }
        
        .header-btn {
            color: white;
            background: none;
            border: none;
            font-size: 16px;
            cursor: pointer;
        }
        
        .back-btn {
            position: absolute;
            left: 16px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            font-size: 20px;
        }
        
        .container {
            padding: 16px;
        }
        
        .form-group {
            margin-bottom: 16px;
        }
        
        label {
            display: block;
            margin-bottom: 8px;
            font-size: 14px;
            color: #666;
        }
        
        input, select, textarea {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 16px;
        }
        
        input:disabled, select:disabled, textarea:disabled {
            background-color: #f9f9f9;
            color: #666;
            cursor: not-allowed;
        }
        
        button {
            padding: 12px 16px;
            background-color: #f44336;
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
        }
        
        button:hover {
            background-color: #d32f2f;
        }
        
        button.secondary {
            background-color: #f5f5f5;
            color: #333;
        }
        
        button.secondary:hover {
            background-color: #e0e0e0;
        }
        
        .full-width {
            width: 100%;
        }
        
        .link-text {
            color: #f44336;
            text-align: center;
            margin-top: 16px;
            cursor: pointer;
            font-size: 14px;
        }
        
        .error-message {
            color: #f44336;
            font-size: 14px;
            margin-top: 4px;
            display: none;
        }
        
        /* 底部导航栏 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            max-width: 480px;
            margin: 0 auto;
            display: flex;
            justify-content: space-around;
            background-color: white;
            border-top: 1px solid #eee;
            padding: 8px 0;
            z-index: 100;
        }
        
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #999;
            font-size: 12px;
            cursor: pointer;
            width: 25%;
        }
        
        .nav-item.active {
            color: #f44336;
        }
        
        .nav-icon {
            font-size: 20px;
            margin-bottom: 4px;
        }
        
        /* 数据概览样式 */
        .stats-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
            margin-bottom: 24px;
        }
        
        .stat-card {
            background-color: white;
            border-radius: 8px;
            padding: 16px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            text-align: center;
        }
        
        .stat-value {
            font-size: 24px;
            font-weight: bold;
            color: #f44336;
            margin: 8px 0;
        }
        
        .stat-label {
            font-size: 14px;
            color: #666;
        }
        
        /* 列表项样式 */
        .list-item {
            display: flex;
            padding: 16px;
            border-bottom: 1px solid #eee;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
        }
        
        .list-item-info {
            flex: 1;
        }
        
        .list-item-title {
            font-size: 16px;
            margin-bottom: 4px;
        }
        
        .list-item-subtitle {
            font-size: 14px;
            color: #666;
        }
        
        .list-item-actions {
            display: flex;
            gap: 8px;
        }
        
        .action-btn {
            padding: 6px 12px;
            font-size: 14px;
        }
        
        .approve-btn {
            background-color: #4CAF50;
        }
        
        .reject-btn {
            background-color: #f44336;
        }
        
        .disable-btn {
            background-color: #ff9800;
        }
        
        /* 标签样式 */
        .tag {
            display: inline-block;
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: bold;
        }
        
        .tag-pending {
            background-color: #fff3e0;
            color: #ff9800;
        }
        
        .tag-approved {
            background-color: #e8f5e9;
            color: #4CAF50;
        }
        
        .tag-rejected {
            background-color: #ffebee;
            color: #f44336;
        }
        
        /* 详情页样式 */
        .detail-section {
            margin-bottom: 24px;
            padding-bottom: 16px;
            border-bottom: 1px solid #eee;
        }
        
        .detail-title {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 12px;
        }
        
        .detail-item {
            display: flex;
            margin-bottom: 8px;
        }
        
        .detail-label {
            width: 80px;
            color: #666;
            flex-shrink: 0;
        }
        
        .detail-value {
            flex: 1;
        }
        
        .photo-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
            margin-top: 8px;
        }
        
        .cert-photo {
            width: 100%;
            height: 120px;
            object-fit: cover;
            border-radius: 4px;
        }
        
        /* 搜索栏样式 */
        .search-bar {
            display: flex;
            margin-bottom: 16px;
            position: relative;
        }
        
        .search-input {
            flex: 1;
            padding-left: 40px;
        }
        
        .search-icon {
            position: absolute;
            left: 12px;
            top: 50%;
            transform: translateY(-50%);
            color: #999;
        }
        
        /* 筛选标签样式 */
        .filter-tabs {
            display: flex;
            overflow-x: auto;
            gap: 8px;
            margin-bottom: 16px;
            padding-bottom: 8px;
        }
        
        .filter-tab {
            padding: 6px 12px;
            background-color: #f5f5f5;
            border-radius: 16px;
            font-size: 14px;
            white-space: nowrap;
            cursor: pointer;
        }
        
        .filter-tab.active {
            background-color: #f44336;
            color: white;
        }
        
        /* 弹窗样式 */
        .modal {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0,0,0,0.5);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }
        
        .modal.active {
            display: flex;
        }
        
        .modal-content {
            background-color: white;
            width: 90%;
            max-width: 400px;
            border-radius: 12px;
            padding: 24px;
        }
        
        .modal-title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 16px;
            text-align: center;
        }
        
        .modal-buttons {
            display: flex;
            gap: 12px;
            margin-top: 24px;
        }
        
        .modal-buttons button {
            flex: 1;
        }
        
        /* 成功提示 */
        .toast {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(0,0,0,0.7);
            color: white;
            padding: 16px 24px;
            border-radius: 8px;
            display: none;
            z-index: 1000;
        }
        
        .toast.active {
            display: block;
        }
    </style>
</head>
<body>
    <!-- 登录页面 -->
    <div id="loginPage" class="page active">
        <header>管理员登录</header>
        <div class="container" style="margin-top: 40px;">
            <div class="form-group">
                <label for="adminUsername">用户名</label>
                <input type="text" id="adminUsername" placeholder="请输入管理员账号">
                <div class="error-message" id="userError">用户名不能为空</div>
            </div>
            <div class="form-group">
                <label for="adminPassword">密码</label>
                <input type="password" id="adminPassword" placeholder="请输入密码">
                <div class="error-message" id="pwdError">密码不能为空</div>
            </div>
            <button id="loginBtn" class="full-width">登录</button>
        </div>
    </div>

    <!-- 数据概览页面 -->
    <div id="dashboardPage" class="page">
        <header>数据概览</header>
        <div class="container">
            <div class="stats-container">
                <div class="stat-card">
                    <div class="stat-value">¥285,600</div>
                    <div class="stat-label">本月销售额</div>
                </div>
                <div class="stat-card">
                    <div class="stat-value">5,682</div>
                    <div class="stat-label">本月订单</div>
                </div>
                <div class="stat-card">
                    <div class="stat-value">128</div>
                    <div class="stat-label">活跃商家</div>
                </div>
                <div class="stat-card">
                    <div class="stat-value">32,645</div>
                    <div class="stat-label">注册用户</div>
                </div>
            </div>
            
            <div class="detail-section">
                <div class="detail-title">销售趋势</div>
                <div style="height: 200px; background-color: #f5f5f5; border-radius: 8px; display: flex; align-items: flex-end; padding: 16px; gap: 6px;">
                    <div style="flex: 1; background-color: #f44336; width: 20px; height: 150px; border-radius: 4px 4px 0 0;"></div>
                    <div style="flex: 1; background-color: #f44336; width: 20px; height: 180px; border-radius: 4px 4px 0 0;"></div>
                    <div style="flex: 1; background-color: #f44336; width: 20px; height: 120px; border-radius: 4px 4px 0 0;"></div>
                    <div style="flex: 1; background-color: #f44336; width: 20px; height: 200px; border-radius: 4px 4px 0 0;"></div>
                    <div style="flex: 1; background-color: #f44336; width: 20px; height: 170px; border-radius: 4px 4px 0 0;"></div>
                    <div style="flex: 1; background-color: #f44336; width: 20px; height: 190px; border-radius: 4px 4px 0 0;"></div>
                    <div style="flex: 1; background-color: #f44336; width: 20px; height: 210px; border-radius: 4px 4px 0 0;"></div>
                </div>
                <div style="display: flex; justify-content: space-between; font-size: 12px; color: #666; margin-top: 8px;">
                    <div>1日</div>
                    <div>5日</div>
                    <div>10日</div>
                    <div>15日</div>
                    <div>20日</div>
                    <div>25日</div>
                    <div>30日</div>
                </div>
            </div>
            
            <div class="detail-section">
                <div class="detail-title">分类销售占比</div>
                <div style="display: flex; flex-wrap: wrap; gap: 12px;">
                    <div style="flex: 1; min-width: 120px; background-color: #fce4ec; padding: 12px; border-radius: 8px;">
                        <div style="font-size: 14px; color: #c2185b;">宠物食品</div>
                        <div style="font-size: 18px; font-weight: bold; margin-top: 8px;">45%</div>
                    </div>
                    <div style="flex: 1; min-width: 120px; background-color: #e8f5e9; padding: 12px; border-radius: 8px;">
                        <div style="font-size: 14px; color: #388e3c;">宠物玩具</div>
                        <div style="font-size: 18px; font-weight: bold; margin-top: 8px;">25%</div>
                    </div>
                    <div style="flex: 1; min-width: 120px; background-color: #e3f2fd; padding: 12px; border-radius: 8px;">
                        <div style="font-size: 14px; color: #1976d2;">宠物服饰</div>
                        <div style="font-size: 18px; font-weight: bold; margin-top: 8px;">15%</div>
                    </div>
                    <div style="flex: 1; min-width: 120px; background-color: #fff8e1; padding: 12px; border-radius: 8px;">
                        <div style="font-size: 14px; color: #f57c00;">其他</div>
                        <div style="font-size: 18px; font-weight: bold; margin-top: 8px;">15%</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="bottom-nav">
            <div class="nav-item active" onclick="goToPage('dashboardPage')">
                <div class="nav-icon">📊</div>
                <div class="nav-text">数据</div>
            </div>
            <div class="nav-item" onclick="goToPage('productManagePage')">
                <div class="nav-icon">📦</div>
                <div class="nav-text">商品</div>
            </div>
            <div class="nav-item" onclick="goToPage('merchantManagePage')">
                <div class="nav-icon">🏪</div>
                <div class="nav-text">商家</div>
            </div>
            <div class="nav-item" onclick="goToPage('orderManagePage')">
                <div class="nav-icon">📋</div>
                <div class="nav-text">订单</div>
            </div>
        </div>
    </div>

    <!-- 商品管理页面 - 移除了返回图标 -->
    <div id="productManagePage" class="page">
        <header>商品管理</header>
        <div class="container">
            <div class="search-bar">
                <span class="search-icon">🔍</span>
                <input type="text" class="search-input" placeholder="搜索商品名称或ID">
            </div>
            
            <div class="filter-tabs">
                <div class="filter-tab active">全部</div>
                <div class="filter-tab">已上架</div>
                <div class="filter-tab">已下架</div>
                <div class="filter-tab">待审核</div>
            </div>
            
            <div class="list-container">
                <div class="list-item">
                    <div class="list-item-info" onclick="openProductDetail(1)">
                        <div class="list-item-title">优质宠物粮食</div>
                        <div class="list-item-subtitle">爱心宠物用品店 | ¥89.00</div>
                    </div>
                    <div class="list-item-actions">
                        <div class="tag tag-approved">已上架</div>
                        <button class="action-btn reject-btn" onclick="openReviewModal('product', 1)">下架</button>
                    </div>
                </div>
                <div class="list-item">
                    <div class="list-item-info" onclick="openProductDetail(2)">
                        <div class="list-item-title">宠物益智玩具</div>
                        <div class="list-item-subtitle">萌宠之家 | ¥39.00</div>
                    </div>
                    <div class="list-item-actions">
                        <div class="tag tag-approved">已上架</div>
                        <button class="action-btn reject-btn" onclick="openReviewModal('product', 2)">下架</button>
                    </div>
                </div>
                <div class="list-item">
                    <div class="list-item-info" onclick="openProductDetail(3)">
                        <div class="list-item-title">宠物秋冬装</div>
                        <div class="list-item-subtitle">爱心宠物用品店 | ¥59.00</div>
                    </div>
                    <div class="list-item-actions">
                        <div class="tag tag-rejected">已下架</div>
                        <button class="action-btn approve-btn" onclick="openReviewModal('product', 3)">上架</button>
                    </div>
                </div>
                <div class="list-item">
                    <div class="list-item-info" onclick="openProductDetail(4)">
                        <div class="list-item-title">宠物沐浴露</div>
                        <div class="list-item-subtitle">宠物健康馆 | ¥45.00</div>
                    </div>
                    <div class="list-item-actions">
                        <div class="tag tag-pending">待审核</div>
                        <button class="action-btn approve-btn" onclick="openReviewModal('product', 4, 'approved')">通过</button>
                        <button class="action-btn reject-btn" onclick="openReviewModal('product', 4, 'rejected')">驳回</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="bottom-nav">
            <div class="nav-item" onclick="goToPage('dashboardPage')">
                <div class="nav-icon">📊</div>
                <div class="nav-text">数据</div>
            </div>
            <div class="nav-item active" onclick="goToPage('productManagePage')">
                <div class="nav-icon">📦</div>
                <div class="nav-text">商品</div>
            </div>
            <div class="nav-item" onclick="goToPage('merchantManagePage')">
                <div class="nav-icon">🏪</div>
                <div class="nav-text">商家</div>
            </div>
            <div class="nav-item" onclick="goToPage('orderManagePage')">
                <div class="nav-icon">📋</div>
                <div class="nav-text">订单</div>
            </div>
        </div>
    </div>

    <!-- 商品详情页面 -->
    <div id="productDetailPage" class="page">
        <header>
            <span class="back-btn" onclick="goToPage('productManagePage')">◀</span>
            <span id="productDetailTitle">商品详情</span>
        </header>
        <div class="container">
            <div class="detail-section">
                <div class="detail-title">基本信息</div>
                <div class="detail-item">
                    <div class="detail-label">ID：</div>
                    <div class="detail-value" id="productId">SP20230512001</div>
                </div>
                <div class="detail-item">
                    <div class="detail-label">名称：</div>
                    <div class="detail-value">
                        <input type="text" id="productName" value="优质宠物粮食" disabled>
                    </div>
                </div>
                <div class="detail-item">
                    <div class="detail-label">商家：</div>
                    <div class="detail-value" id="productMerchant">爱心宠物用品店</div>
                </div>
                <div class="detail-item">
                    <div class="detail-label">分类：</div>
                    <div class="detail-value">
                        <select id="productCategory" disabled>
                            <option value="food" selected>宠物食品</option>
                            <option value="toy">宠物玩具</option>
                            <option value="cloth">宠物服饰</option>
                            <option value="daily">日用品</option>
                            <option value="health">医疗保健</option>
                        </select>
                    </div>
                </div>
                <div class="detail-item">
                    <div class="detail-label">价格：</div>
                    <div class="detail-value">
                        <input type="number" id="productPrice" value="89.00" step="0.01" min="0" disabled>
                    </div>
                </div>
                <div class="detail-item">
                    <div class="detail-label">库存：</div>
                    <div class="detail-value">
                        <input type="number" id="productStock" value="120" min="0" disabled>
                    </div>
                </div>
                <div class="detail-item">
                    <div class="detail-label">状态：</div>
                    <div class="detail-value">
                        <select id="productStatus" disabled>
                            <option value="pending">待审核</option>
                            <option value="approved" selected>已上架</option>
                            <option value="rejected">已下架</option>
                        </select>
                    </div>
                </div>
            </div>
            
            <div class="detail-section">
                <div class="detail-title">商品图片</div>
                <div class="photo-grid">
                    <img src="https://picsum.photos/seed/petfood/200/200" class="cert-photo">
                </div>
            </div>
            
            <div class="detail-section">
                <div class="detail-title">商品描述</div>
                <div class="detail-value">
                    <textarea id="productDesc" rows="4" disabled>本品采用天然食材制作，无谷配方，富含蛋白质和多种维生素，有助于宠物健康成长。</textarea>
                </div>
            </div>
            
            <div id="productReviewActions" style="display: flex; gap: 16px;">
                <button class="secondary full-width" onclick="goToPage('productManagePage')">返回</button>
                <button class="full-width approve-btn" id="approveProductBtn" style="display: none;" onclick="openReviewModal('product', currentId, 'approved')">通过</button>
                <button class="full-width reject-btn" id="rejectProductBtn" style="display: none;" onclick="openReviewModal('product', currentId, 'rejected')">驳回</button>
            </div>
        </div>
    </div>

    <!-- 商家管理页面 - 移除了返回图标 -->
    <div id="merchantManagePage" class="page">
        <header>商家管理</header>
        <div class="container">
            <div class="search-bar">
                <span class="search-icon">🔍</span>
                <input type="text" class="search-input" placeholder="搜索商家名称或ID">
            </div>
            
            <div class="filter-tabs">
                <div class="filter-tab active">全部</div>
                <div class="filter-tab">已认证</div>
                <div class="filter-tab">待审核</div>
                <div class="filter-tab">已禁用</div>
            </div>
            
            <div class="list-container">
                <div class="list-item">
                    <div class="list-item-info" onclick="openMerchantDetail(1)">
                        <div class="list-item-title">爱心宠物用品店</div>
                        <div class="list-item-subtitle">联系人：王经理 | 139****9000</div>
                    </div>
                    <div class="list-item-actions">
                        <div class="tag tag-approved">已认证</div>
                        <button class="action-btn disable-btn" onclick="openReviewModal('merchant', 1, 'rejected')">禁用</button>
                    </div>
                </div>
                <div class="list-item">
                    <div class="list-item-info" onclick="openMerchantDetail(2)">
                        <div class="list-item-title">萌宠之家</div>
                        <div class="list-item-subtitle">联系人：李女士 | 138****8000</div>
                    </div>
                    <div class="list-item-actions">
                        <div class="tag tag-approved">已认证</div>
                        <button class="action-btn disable-btn" onclick="openReviewModal('merchant', 2, 'rejected')">禁用</button>
                    </div>
                </div>
                <div class="list-item">
                    <div class="list-item-info" onclick="openMerchantDetail(3)">
                        <div class="list-item-title">宠物健康馆</div>
                        <div class="list-item-subtitle">联系人：张先生 | 137****7000</div>
                    </div>
                    <div class="list-item-actions">
                        <div class="tag tag-pending">待审核</div>
                        <button class="action-btn approve-btn" onclick="openReviewModal('merchant', 3, 'approved')">通过</button>
                        <button class="action-btn reject-btn" onclick="openReviewModal('merchant', 3, 'rejected')">驳回</button>
                    </div>
                </div>
                <div class="list-item">
                    <div class="list-item-info" onclick="openMerchantDetail(4)">
                        <div class="list-item-title">快乐宠物坊</div>
                        <div class="list-item-subtitle">联系人：赵先生 | 136****6000</div>
                    </div>
                    <div class="list-item-actions">
                        <div class="tag tag-rejected">已禁用</div>
                        <button class="action-btn approve-btn" onclick="openReviewModal('merchant', 4, 'approved')">启用</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="bottom-nav">
            <div class="nav-item" onclick="goToPage('dashboardPage')">
                <div class="nav-icon">📊</div>
                <div class="nav-text">数据</div>
            </div>
            <div class="nav-item" onclick="goToPage('productManagePage')">
                <div class="nav-icon">📦</div>
                <div class="nav-text">商品</div>
            </div>
            <div class="nav-item active" onclick="goToPage('merchantManagePage')">
                <div class="nav-icon">🏪</div>
                <div class="nav-text">商家</div>
            </div>
            <div class="nav-item" onclick="goToPage('orderManagePage')">
                <div class="nav-icon">📋</div>
                <div class="nav-text">订单</div>
            </div>
        </div>
    </div>

    <!-- 商家详情页面 -->
    <div id="merchantDetailPage" class="page">
        <header>
            <span class="back-btn" onclick="goToPage('merchantManagePage')">◀</span>
            商家详情
        </header>
        <div class="container">
            <div class="detail-section">
                <div class="detail-title">基本信息</div>
                <div class="detail-item">
                    <div class="detail-label">ID：</div>
                    <div class="detail-value" id="merchantId">SH20230501001</div>
                </div>
                <div class="detail-item">
                    <div class="detail-label">名称：</div>
                    <div class="detail-value">
                        <input type="text" id="merchantName" value="爱心宠物用品店" disabled>
                    </div>
                </div>
                <div class="detail-item">
                    <div class="detail-label">联系人：</div>
                    <div class="detail-value">
                        <input type="text" id="merchantContact" value="王经理" disabled>
                    </div>
                </div>
                <div class="detail-item">
                    <div class="detail-label">电话：</div>
                    <div class="detail-value">
                        <input type="text" id="merchantPhone" value="13900139000" disabled>
                    </div>
                </div>
                <div class="detail-item">
                    <div class="detail-label">主营：</div>
                    <div class="detail-value">
                        <input type="text" id="merchantCategory" value="宠物食品、宠物日用品" disabled>
                    </div>
                </div>
                <div class="detail-item">
                    <div class="detail-label">状态：</div>
                    <div class="detail-value">
                        <select id="merchantStatus" disabled>
                            <option value="pending">待审核</option>
                            <option value="approved" selected>已认证</option>
                            <option value="rejected">已禁用</option>
                        </select>
                    </div>
                </div>
                <div class="detail-item">
                    <div class="detail-label">入驻时间：</div>
                    <div class="detail-value" id="merchantJoinTime">2023-05-01</div>
                </div>
            </div>
            
            <div class="detail-section">
                <div class="detail-title">资质认证</div>
                <div class="detail-item">
                    <div class="detail-label">法人：</div>
                    <div class="detail-value">
                        <input type="text" id="legalPerson" value="王某某" disabled>
                    </div>
                </div>
                <div class="detail-item">
                    <div class="detail-label">身份证：</div>
                    <div class="detail-value">
                        <input type="text" id="idCard" value="110********5678" disabled>
                    </div>
                </div>
                <div class="detail-item">
                    <div class="detail-label">身份证照片：</div>
                    <div class="detail-value">
                        <div class="photo-grid">
                            <img src="https://picsum.photos/seed/idcard1/200/200" class="cert-photo">
                            <img src="https://picsum.photos/seed/idcard2/200/200" class="cert-photo">
                        </div>
                    </div>
                </div>
                <div class="detail-item">
                    <div class="detail-label">营业执照：</div>
                    <div class="detail-value">
                        <div class="photo-grid">
                            <img src="https://picsum.photos/seed/license/200/200" class="cert-photo">
                        </div>
                    </div>
                </div>
                <div class="detail-item">
                    <div class="detail-label">经营地址：</div>
                    <div class="detail-value">
                        <input type="text" id="businessAddress" value="北京市朝阳区某某街道XX号" disabled>
                    </div>
                </div>
            </div>
            
            <div class="detail-section">
                <div class="detail-title">经营数据</div>
                <div class="detail-item">
                    <div class="detail-label">商品数：</div>
                    <div class="detail-value" id="productCount">28</div>
                </div>
                <div class="detail-item">
                    <div class="detail-label">月销量：</div>
                    <div class="detail-value" id="monthSales">1265</div>
                </div>
                <div class="detail-item">
                    <div class="detail-label">月销售额：</div>
                    <div class="detail-value" id="monthRevenue">¥45,890</div>
                </div>
            </div>
            
            <div id="merchantReviewActions" style="display: flex; gap: 16px;">
                <button class="secondary full-width" onclick="goToPage('merchantManagePage')">返回</button>
                <button class="full-width approve-btn" id="approveMerchantBtn" style="display: none;" onclick="openReviewModal('merchant', currentId, 'approved')">通过</button>
                <button class="full-width reject-btn" id="rejectMerchantBtn" style="display: none;" onclick="openReviewModal('merchant', currentId, 'rejected')">禁用</button>
            </div>
        </div>
    </div>

    <!-- 订单管理页面 - 移除了返回图标 -->
    <div id="orderManagePage" class="page">
        <header>订单管理</header>
        <div class="container">
            <div class="search-bar">
                <span class="search-icon">🔍</span>
                <input type="text" class="search-input" placeholder="搜索订单号或用户名">
            </div>
            
            <div class="filter-tabs">
                <div class="filter-tab active">全部</div>
                <div class="filter-tab">待付款</div>
                <div class="filter-tab">待发货</div>
                <div class="filter-tab">已发货</div>
                <div class="filter-tab">已完成</div>
                <div class="filter-tab">已取消</div>
            </div>
            
            <div class="list-container">
                <div class="list-item" onclick="openOrderDetail(1)">
                    <div class="list-item-info">
                        <div class="list-item-title">订单 #20230512001</div>
                        <div class="list-item-subtitle">优质宠物粮食 | 张三</div>
                    </div>
                    <div style="text-align: right;">
                        <div style="font-weight: bold; color: #f44336;">¥89.00</div>
                        <div class="tag tag-pending">待发货</div>
                    </div>
                </div>
                <div class="list-item" onclick="openOrderDetail(2)">
                    <div class="list-item-info">
                        <div class="list-item-title">订单 #20230510002</div>
                        <div class="list-item-subtitle">宠物益智玩具 x2 | 李四</div>
                    </div>
                    <div style="text-align: right;">
                        <div style="font-weight: bold; color: #f44336;">¥78.00</div>
                        <div class="tag tag-approved">已发货</div>
                    </div>
                </div>
                <div class="list-item" onclick="openOrderDetail(3)">
                    <div class="list-item-info">
                        <div class="list-item-title">订单 #20230509015</div>
                        <div class="list-item-subtitle">宠物秋冬装 | 王五</div>
                    </div>
                    <div style="text-align: right;">
                        <div style="font-weight: bold; color: #f44336;">¥59.00</div>
                        <div class="tag tag-approved">已完成</div>
                    </div>
                </div>
                <div class="list-item" onclick="openOrderDetail(4)">
                    <div class="list-item-info">
                        <div class="list-item-title">订单 #20230508022</div>
                        <div class="list-item-subtitle">宠物沐浴露 | 赵六</div>
                    </div>
                    <div style="text-align: right;">
                        <div style="font-weight: bold; color: #f44336;">¥45.00</div>
                        <div class="tag tag-rejected">已取消</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="bottom-nav">
            <div class="nav-item" onclick="goToPage('dashboardPage')">
                <div class="nav-icon">📊</div>
                <div class="nav-text">数据</div>
            </div>
            <div class="nav-item" onclick="goToPage('productManagePage')">
                <div class="nav-icon">📦</div>
                <div class="nav-text">商品</div>
            </div>
            <div class="nav-item" onclick="goToPage('merchantManagePage')">
                <div class="nav-icon">🏪</div>
                <div class="nav-text">商家</div>
            </div>
            <div class="nav-item active" onclick="goToPage('orderManagePage')">
                <div class="nav-icon">📋</div>
                <div class="nav-text">订单</div>
            </div>
        </div>
    </div>

    <!-- 订单详情页面 -->
    <div id="orderDetailPage" class="page">
        <header>
            <span class="back-btn" onclick="goToPage('orderManagePage')">◀</span>
            订单详情
        </header>
        <div class="container">
            <div class="detail-section">
                <div class="detail-title">订单信息</div>
                <div class="detail-item">
                    <div class="detail-label">订单号：</div>
                    <div class="detail-value" id="orderId">20230512001</div>
                </div>
                <div class="detail-item">
                    <div class="detail-label">下单时间：</div>
                    <div class="detail-value" id="orderTime">2023-05-12 10:30:25</div>
                </div>
                <div class="detail-item">
                    <div class="detail-label">订单状态：</div>
                    <div class="detail-value" id="orderStatusText">待发货</div>
                </div>
                <div class="detail-item">
                    <div class="detail-label">支付方式：</div>
                    <div class="detail-value" id="paymentMethod">微信支付</div>
                </div>
                <div class="detail-item">
                    <div class="detail-label">支付时间：</div>
                    <div class="detail-value" id="paymentTime">2023-05-12 10:32:18</div>
                </div>
            </div>
            
            <div class="detail-section">
                <div class="detail-title">商品信息</div>
                <div style="display: flex; padding: 12px; border-radius: 8px; background-color: #f9f9f9; margin-bottom: 12px;">
                    <img src="https://picsum.photos/seed/petfood/100/100" style="width: 60px; height: 60px; object-fit: cover; border-radius: 4px; margin-right: 12px;">
                    <div style="flex: 1;">
                        <div style="font-weight: bold;">优质宠物粮食</div>
                        <div style="font-size: 14px; color: #666;">商家：爱心宠物用品店</div>
                        <div style="font-size: 14px; color: #666;">数量：1</div>
                    </div>
                    <div style="text-align: right;">
                        <div style="font-weight: bold; color: #f44336;">¥89.00</div>
                    </div>
                </div>
            </div>
            
            <div class="detail-section">
                <div class="detail-title">收货信息</div>
                <div class="detail-item">
                    <div class="detail-label">收货人：</div>
                    <div class="detail-value" id="recipientName">张三</div>
                </div>
                <div class="detail-item">
                    <div class="detail-label">电话：</div>
                    <div class="detail-value" id="recipientPhone">138****8000</div>
                </div>
                <div class="detail-item">
                    <div class="detail-label">地址：</div>
                    <div class="detail-value" id="shippingAddress">北京市朝阳区某某街道XX小区X号楼XXX室</div>
                </div>
            </div>
            
            <div class="detail-section">
                <div class="detail-title">金额信息</div>
                <div class="detail-item">
                    <div class="detail-label">商品金额：</div>
                    <div class="detail-value" id="productAmount">¥89.00</div>
                </div>
                <div class="detail-item">
                    <div class="detail-label">运费：</div>
                    <div class="detail-value" id="shippingFee">¥0.00</div>
                </div>
                <div class="detail-item">
                    <div class="detail-label">优惠：</div>
                    <div class="detail-value" id="discount">¥5.00</div>
                </div>
                <div class="detail-item">
                    <div class="detail-label" style="font-weight: bold;">实付款：</div>
                    <div class="detail-value" style="font-weight: bold; color: #f44336;" id="actualPayment">¥84.00</div>
                </div>
            </div>
            
            <div style="display: flex; gap: 16px;">
                <button class="secondary full-width" onclick="goToPage('orderManagePage')">返回</button>
            </div>
        </div>
    </div>

    <!-- 审核弹窗 -->
    <div class="modal" id="reviewModal">
        <div class="modal-content">
            <div class="modal-title" id="reviewModalTitle">审核商家</div>
            <div class="form-group">
                <label for="reviewResult">审核结果</label>
                <select id="reviewResult">
                    <option value="approved">通过</option>
                    <option value="rejected">驳回</option>
                </select>
            </div>
            <div class="form-group">
                <label for="reviewComment">审核意见</label>
                <textarea id="reviewComment" rows="4" placeholder="请输入审核意见"></textarea>
            </div>
            <div class="modal-buttons">
                <button class="secondary" onclick="closeReviewModal()">取消</button>
                <button onclick="submitReview()">提交</button>
            </div>
        </div>
    </div>

    <!-- 提示弹窗 -->
    <div class="toast" id="toast">操作成功</div>

    <script>
        // 当前操作的ID
        let currentId = null;
        let reviewType = '';
        let preSelectedResult = '';

        // 页面跳转
        function goToPage(pageId) {
            document.querySelectorAll('.page').forEach(page => {
                page.classList.remove('active');
            });
            document.getElementById(pageId).classList.add('active');
        }

        // 登录功能
        document.getElementById('loginBtn').addEventListener('click', () => {
            const username = document.getElementById('adminUsername').value;
            const password = document.getElementById('adminPassword').value;
            let isValid = true;

            if (!username) {
                document.getElementById('userError').style.display = 'block';
                isValid = false;
            } else {
                document.getElementById('userError').style.display = 'none';
            }

            if (!password) {
                document.getElementById('pwdError').style.display = 'block';
                isValid = false;
            } else {
                document.getElementById('pwdError').style.display = 'none';
            }

            if (isValid) {
                showToast('登录成功');
                setTimeout(() => {
                    goToPage('dashboardPage');
                }, 1000);
            }
        });

        // 打开商品详情（仅查看）
        function openProductDetail(id) {
            currentId = id;
            const title = document.getElementById('productDetailTitle');
            title.textContent = '商品详情';
            
            // 根据ID加载不同商品数据
            if (id === 1) {
                document.getElementById('productId').textContent = 'SP20230512001';
                document.getElementById('productName').value = '优质宠物粮食';
                document.getElementById('productMerchant').textContent = '爱心宠物用品店';
                document.getElementById('productCategory').value = 'food';
                document.getElementById('productPrice').value = '89.00';
                document.getElementById('productStock').value = '120';
                document.getElementById('productStatus').value = 'approved';
                document.getElementById('productDesc').value = '本品采用天然食材制作，无谷配方，富含蛋白质和多种维生素，有助于宠物健康成长。';
                
                // 隐藏审核按钮，显示下架按钮
                document.getElementById('approveProductBtn').style.display = 'none';
                document.getElementById('rejectProductBtn').style.display = 'block';
                document.getElementById('rejectProductBtn').textContent = '下架';
            } else if (id === 2) {
                document.getElementById('productId').textContent = 'SP20230512002';
                document.getElementById('productName').value = '宠物益智玩具';
                document.getElementById('productMerchant').textContent = '萌宠之家';
                document.getElementById('productCategory').value = 'toy';
                document.getElementById('productPrice').value = '39.00';
                document.getElementById('productStock').value = '86';
                document.getElementById('productStatus').value = 'approved';
                document.getElementById('productDesc').value = '宠物益智玩具，帮助宠物开发智力，减少破坏性行为。';
                
                // 隐藏审核按钮，显示下架按钮
                document.getElementById('approveProductBtn').style.display = 'none';
                document.getElementById('rejectProductBtn').style.display = 'block';
                document.getElementById('rejectProductBtn').textContent = '下架';
            } else if (id === 3) {
                document.getElementById('productId').textContent = 'SP20230512003';
                document.getElementById('productName').value = '宠物秋冬装';
                document.getElementById('productMerchant').textContent = '爱心宠物用品店';
                document.getElementById('productCategory').value = 'cloth';
                document.getElementById('productPrice').value = '59.00';
                document.getElementById('productStock').value = '45';
                document.getElementById('productStatus').value = 'rejected';
                document.getElementById('productDesc').value = '宠物秋冬装，保暖舒适，适合秋冬季节穿着。';
                
                // 显示上架按钮，隐藏驳回按钮
                document.getElementById('approveProductBtn').style.display = 'block';
                document.getElementById('approveProductBtn').textContent = '上架';
                document.getElementById('rejectProductBtn').style.display = 'none';
            } else if (id === 4) {
                document.getElementById('productId').textContent = 'SP20230512004';
                document.getElementById('productName').value = '宠物沐浴露';
                document.getElementById('productMerchant').textContent = '宠物健康馆';
                document.getElementById('productCategory').value = 'daily';
                document.getElementById('productPrice').value = '45.00';
                document.getElementById('productStock').value = '60';
                document.getElementById('productStatus').value = 'pending';
                document.getElementById('productDesc').value = '温和配方宠物沐浴露，适合各种犬类使用。';
                
                // 显示审核按钮
                document.getElementById('approveProductBtn').style.display = 'block';
                document.getElementById('approveProductBtn').textContent = '通过';
                document.getElementById('rejectProductBtn').style.display = 'block';
                document.getElementById('rejectProductBtn').textContent = '驳回';
            }
            
            goToPage('productDetailPage');
        }

        // 打开商家详情（仅查看）
        function openMerchantDetail(id) {
            currentId = id;
            
            // 根据ID加载不同商家数据
            if (id === 1) {
                document.getElementById('merchantId').textContent = 'SH20230501001';
                document.getElementById('merchantName').value = '爱心宠物用品店';
                document.getElementById('merchantContact').value = '王经理';
                document.getElementById('merchantPhone').value = '13900139000';
                document.getElementById('merchantCategory').value = '宠物食品、宠物日用品';
                document.getElementById('merchantStatus').value = 'approved';
                document.getElementById('merchantJoinTime').textContent = '2023-05-01';
                document.getElementById('legalPerson').value = '王某某';
                document.getElementById('idCard').value = '110********5678';
                document.getElementById('businessAddress').value = '北京市朝阳区某某街道XX号';
                document.getElementById('productCount').textContent = '28';
                document.getElementById('monthSales').textContent = '1265';
                document.getElementById('monthRevenue').textContent = '¥45,890';
                
                // 显示禁用按钮
                document.getElementById('approveMerchantBtn').style.display = 'none';
                document.getElementById('rejectMerchantBtn').style.display = 'block';
                document.getElementById('rejectMerchantBtn').textContent = '禁用';
            } else if (id === 3) {
                document.getElementById('merchantId').textContent = 'SH20230501003';
                document.getElementById('merchantName').value = '宠物健康馆';
                document.getElementById('merchantContact').value = '张先生';
                document.getElementById('merchantPhone').value = '137****7000';
                document.getElementById('merchantCategory').value = '宠物医疗保健、宠物日用品';
                document.getElementById('merchantStatus').value = 'pending';
                document.getElementById('merchantJoinTime').textContent = '2023-05-10';
                document.getElementById('legalPerson').value = '张某某';
                document.getElementById('idCard').value = '110********1234';
                document.getElementById('businessAddress').value = '北京市海淀区某某街道XX号';
                document.getElementById('productCount').textContent = '15';
                document.getElementById('monthSales').textContent = '0';
                document.getElementById('monthRevenue').textContent = '¥0';
                
                // 显示审核按钮
                document.getElementById('approveMerchantBtn').style.display = 'block';
                document.getElementById('approveMerchantBtn').textContent = '通过';
                document.getElementById('rejectMerchantBtn').style.display = 'block';
                document.getElementById('rejectMerchantBtn').textContent = '驳回';
            } else if (id === 4) {
                document.getElementById('merchantId').textContent = 'SH20230401001';
                document.getElementById('merchantName').value = '快乐宠物坊';
                document.getElementById('merchantContact').value = '赵先生';
                document.getElementById('merchantPhone').value = '136****6000';
                document.getElementById('merchantCategory').value = '宠物玩具、宠物服饰';
                document.getElementById('merchantStatus').value = 'rejected';
                document.getElementById('merchantJoinTime').textContent = '2023-04-01';
                document.getElementById('legalPerson').value = '赵某某';
                document.getElementById('idCard').value = '110********8765';
                document.getElementById('businessAddress').value = '北京市丰台区某某街道XX号';
                document.getElementById('productCount').textContent = '22';
                document.getElementById('monthSales').textContent = '0';
                document.getElementById('monthRevenue').textContent = '¥0';
                
                // 显示启用按钮
                document.getElementById('approveMerchantBtn').style.display = 'block';
                document.getElementById('approveMerchantBtn').textContent = '启用';
                document.getElementById('rejectMerchantBtn').style.display = 'none';
            }
            
            goToPage('merchantDetailPage');
        }

        // 打开订单详情（仅查看）
        function openOrderDetail(id) {
            currentId = id;
            
            // 根据ID加载不同订单数据
            if (id === 1) {
                document.getElementById('orderId').textContent = '20230512001';
                document.getElementById('orderTime').textContent = '2023-05-12 10:30:25';
                document.getElementById('orderStatusText').textContent = '待发货';
                document.getElementById('paymentMethod').textContent = '微信支付';
                document.getElementById('paymentTime').textContent = '2023-05-12 10:32:18';
                document.getElementById('recipientName').textContent = '张三';
                document.getElementById('recipientPhone').textContent = '138****8000';
                document.getElementById('shippingAddress').textContent = '北京市朝阳区某某街道XX小区X号楼XXX室';
                document.getElementById('productAmount').textContent = '¥89.00';
                document.getElementById('shippingFee').textContent = '¥0.00';
                document.getElementById('discount').textContent = '¥5.00';
                document.getElementById('actualPayment').textContent = '¥84.00';
            } else if (id === 2) {
                document.getElementById('orderId').textContent = '20230510002';
                document.getElementById('orderTime').textContent = '2023-05-10 15:20:10';
                document.getElementById('orderStatusText').textContent = '已发货';
                document.getElementById('paymentMethod').textContent = '支付宝';
                document.getElementById('paymentTime').textContent = '2023-05-10 15:22:30';
                document.getElementById('recipientName').textContent = '李四';
                document.getElementById('recipientPhone').textContent = '139****9000';
                document.getElementById('shippingAddress').textContent = '上海市浦东新区某某街道XX小区X号楼XXX室';
                document.getElementById('productAmount').textContent = '¥78.00';
                document.getElementById('shippingFee').textContent = '¥0.00';
                document.getElementById('discount').textContent = '¥0.00';
                document.getElementById('actualPayment').textContent = '¥78.00';
            }
            
            goToPage('orderDetailPage');
        }

        // 打开审核弹窗
        function openReviewModal(type, id, result) {
            currentId = id;
            reviewType = type;
            preSelectedResult = result || 'approved';
            
            const modalTitle = document.getElementById('reviewModalTitle');
            const reviewResult = document.getElementById('reviewResult');
            
            if (type === 'merchant') {
                if (result === 'rejected' && document.getElementById('merchantStatus').value === 'approved') {
                    modalTitle.textContent = '禁用商家';
                } else if (result === 'approved' && document.getElementById('merchantStatus').value === 'rejected') {
                    modalTitle.textContent = '启用商家';
                } else {
                    modalTitle.textContent = '审核商家';
                }
            } else {
                if (result === 'rejected' && document.getElementById('productStatus').value === 'approved') {
                    modalTitle.textContent = '下架商品';
                } else if (result === 'approved' && document.getElementById('productStatus').value === 'rejected') {
                    modalTitle.textContent = '上架商品';
                } else {
                    modalTitle.textContent = '审核商品';
                }
            }
            
            // 设置默认选中的审核结果
            reviewResult.value = preSelectedResult;
            document.getElementById('reviewComment').value = '';
            document.getElementById('reviewModal').classList.add('active');
        }

        // 关闭审核弹窗
        function closeReviewModal() {
            document.getElementById('reviewModal').classList.remove('active');
        }

        // 提交审核
        function submitReview() {
            if (!document.getElementById('reviewComment').value) {
                showToast('请输入审核意见');
                return;
            }
            
            const result = document.getElementById('reviewResult').value;
            let message = '';
            
            if (reviewType === 'merchant') {
                if (result === 'approved') {
                    message = document.getElementById('merchantStatus').value === 'rejected' ? '商家已启用' : '商家审核通过';
                } else {
                    message = document.getElementById('merchantStatus').value === 'approved' ? '商家已禁用' : '商家审核驳回';
                }
            } else {
                if (result === 'approved') {
                    message = document.getElementById('productStatus').value === 'rejected' ? '商品已上架' : '商品审核通过';
                } else {
                    message = document.getElementById('productStatus').value === 'approved' ? '商品已下架' : '商品审核驳回';
                }
            }
            
            closeReviewModal();
            showToast(message);
            
            setTimeout(() => {
                if (reviewType === 'merchant') {
                    goToPage('merchantManagePage');
                } else {
                    goToPage('productManagePage');
                }
            }, 1000);
        }

        // 显示提示
        function showToast(message) {
            const toast = document.getElementById('toast');
            toast.textContent = message;
            toast.classList.add('active');
            setTimeout(() => {
                toast.classList.remove('active');
            }, 1500);
        }

        // 筛选标签点击事件
        document.querySelectorAll('.filter-tab').forEach(tab => {
            tab.addEventListener('click', () => {
                // 移除同组所有标签的active类
                tab.parentElement.querySelectorAll('.filter-tab').forEach(t => {
                    t.classList.remove('active');
                });
                // 给当前点击的标签添加active类
                tab.classList.add('active');
            });
        });
    </script>
</body>
</html>
